<template>
  <div class="main">
    <div class="mainLeft">
      <div class="mainLeftTop">
        <div class="mainLeftTopL">
          <div class="ceng1"></div>
          <div class="titleMainLeftTopL"></div>
          <div class="textMainLeftTopL">重点地区排查整治</div>
          <div id="zddq"></div>
        </div>
        <div class="mainLeftTopR">
          <div class="ceng2"></div>
          <div class="titleMainLeftTopR"></div>
          <div class="textMainLeftTopR">治安突出问题</div>
          <div id="tcwt"></div>
        </div>
      </div>
      <div class="mainLeftBottom">
        <div class="mainLeftBottomL">
          <div class="ceng3"></div>
          <div class="titleMainLeftBottomL"></div>
          <div class="textMainLeftBottomL">上报排名</div>
          <div style="color: white;">
            <span style="font-size: 12px;color: #6aeefb;">案件数量：</span><span style="color: #6aeefb;">213起</span>
            <span style="font-size: 12px;color: #ec635d;">命案防控：</span><span style="color: #ec635d;">50起</span>
          </div>
          <div style="color: white;font-size: 14px;margin-top: 10px;margin-bottom: 10px;">乡镇排名：</div>
          <div class="xzpm"></div>
          <div class="dataXzpm">
            <ul>
              <li><span>明港镇</span><span class="dataLi">32起</span></li>
              <li><span>邢集镇</span><span class="dataLi">31起</span></li>
              <li><span>平昌关镇</span><span class="dataLi">29起</span></li>
              <li><span>五里镇</span><span class="dataLi">28起</span></li>
              <li><span>洋河镇</span><span class="dataLi">26起</span></li>
              <li><span>肖王镇</span><span class="dataLi">25起</span></li>
              <li><span>龙井乡</span><span class="dataLi">23起</span></li>
              <li><span>肖店乡</span><span class="dataLi">21起</span></li>
              <li><span>胡店乡</span><span class="dataLi">20起</span></li>
              <li><span>彭家湾乡</span><span class="dataLi">19起</span></li>
              <li><span>长台关乡</span><span class="dataLi">18起</span></li>
              <li><span>查山乡</span><span class="dataLi">17起</span></li>
              <li><span>王岗乡</span><span class="dataLi">16起</span></li>
              <li><span>高粱店乡</span><span class="dataLi">14起</span></li>
              <li><span>兰店办事处</span><span class="dataLi">12起</span></li>
              <li><span>陆庙办事处</span><span class="dataLi">9起</span></li>
            </ul>
          </div>
        </div>
        <div class="mainLeftBottomC">
          <div class="ceng4"></div>
          <div class="mainLeftBottomCT">
            <div class="titleMainLeftBottomCT"></div>
            <div class="textMainLeftBottomCT">嫌疑人学历分析</div>
            <div id="xyrxl"></div>
          </div>
          <div class="mainLeftBottomCB">
            <div class="titleMainLeftBottomCB"></div>
            <div class="textMainLeftBottomCB">受害人学历分析</div>
            <div id="shrxl"></div>
          </div>
        </div>
        <div class="mainLeftBottomR">
          <div class="ceng5"></div>
          <div class="titleMainLeftBottomR"></div>
          <div class="textMainLeftBottomR">受害人分析</div>
          <div id="shrfx"></div>
        </div>
      </div>
    </div>
    <div class="mainRight">
      <div class="ceng6"></div>
      <div class="mainRightT">
        <div class="titleMainRightT"></div>
        <div class="textMainRightT">物流企业分析</div>
        <div id="wlqyfx"></div>
      </div>
      <div class="mainRightC">
        <div class="titleMainRightC"></div>
        <div class="textMainRightC">物流企业控股分析</div>
        <div id="kgfx"></div>
      </div>
      <div class="mainRightB">
        <div class="titleMainRightB"></div>
        <div class="textMainRightB">物流从业人数分析</div>
        <div id="cyrs"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  mounted () {
    this.zddq()
    this.tcwt()
    this.xyrxl()
    this.shrxl()
    this.shrfx()
    this.wlqyfx()
    this.kgfx()
    this.cyrs()
  },
  methods: {
    zddq () {
      let zddqEcharts = this.$echarts.init(document.getElementById('zddq'))
      zddqEcharts.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['学校周边', '交通场站', '娱乐场所', '集贸市场', '城乡结合部', '重点线路', '其他'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              // rotate: 30,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 30,
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#8ddff7'},
                    // {offset: 0.5, color: '#44C0C1'},
                    {offset: 1, color: '#478dff'}
                  ]
                )
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#478dff'},
                    // {offset: 0.7, color: '#44C0C1'},
                    {offset: 1, color: '#8ddff7'}
                  ]
                )
              }
            }
          }
        ]
      })
    },
    tcwt () {
      let tcwtEcharts = this.$echarts.init(document.getElementById('tcwt'))
      tcwtEcharts.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['命案', '入室盗窃', '抢劫抢夺', '电信诈骗', '拎包扒窃', '偷盗机动车', '卖淫嫖娼', '赌博', '拐卖妇女儿童', '制假贩假', '制黄贩黄', '高利贷', '强买强卖', '交通秩序混乱', '其他'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '件数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 232, 112, 123, 321, 412, 313, 132, 141],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#62beaf'},
                    // {offset: 0.5, color: '#44C0C1'},
                    {offset: 1, color: '#df722c'}
                  ]
                )
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#df722c'},
                    // {offset: 0.7, color: '#44C0C1'},
                    {offset: 1, color: '#62beaf'}
                  ]
                )
              }
            }
          }
        ]
      })
    },
    xyrxl () {
      let xyrxlEcharts = this.$echarts.init(document.getElementById('xyrxl'))
      xyrxlEcharts.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['小学以下', '小学', '中学', '大专', '本科', '硕士', '硕士以上'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '学历',
            type: 'bar',
            barWidth: 30,
            data: [10, 52, 200, 334, 390, 330, 220],
            color: '#51c2d3'
          }
        ]
      })
    },
    shrxl () {
      let shrxlEcharts = this.$echarts.init(document.getElementById('shrxl'))
      shrxlEcharts.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['小学以下', '小学', '中学', '大专', '本科', '硕士', '硕士以上'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '学历',
            type: 'bar',
            barWidth: 30,
            data: [49, 272, 123, 62, 36, 12, 31],
            color: '#2d92d3'
          }
        ]
      })
    },
    shrfx () {
      let shrfxEcharts = this.$echarts.init(document.getElementById('shrfx'))
      shrfxEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['男', '女'],
          // orient: 'vertical',
          x: 'right',
          y: 15,
          padding: 2,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['小学以下', '小学', '中学', '大专', '本科', '硕士', '硕士以上'],
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '男',
            type: 'bar',
            barWidth: 30,
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [60, 78, 86, 16, 48, 67, 23],
            color: '#6aeefb'
          },
          {
            name: '女',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [76, 53, 88, 40, 12, 72, 19],
            color: '#ec635d'
          }
        ]
      })
    },
    wlqyfx () {
      let wlqyfxEcharts = this.$echarts.init(document.getElementById('wlqyfx'))
      wlqyfxEcharts.setOption({
        backgroundColor: '',
        tooltip: {},
        grid: {
          top: '5%'
        },
        legend: {
          data: [''],
          right: '10%',
          top: '5%',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        xAxis: {
          data: ['有快递(物流)业务许可证', '备案分支机构', '其他'],
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // rotate: 25,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',
              width: '1'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#40A1EA',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisLine: {
            show: false
          }
        },
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: 30,
          data: [30, 49, 26],
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = [
                  '#1076b2', '#0cc6c2', '#0d7ebc'
                ]
                return colorList[params.dataIndex]
              }
            }
          }
        }]
      })
    },
    kgfx () {
      let kgfxEcharts = this.$echarts.init(document.getElementById('kgfx'))
      kgfxEcharts.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: '类别',
            data: ['国有控股', '集体控股', '私人控股', '港澳台控股', '外商控股'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: 30,
            data: [15, 27, 20, 23, 16],
            color: '#51c2d3'
          }
        ]

        // backgroundColor: '',
        // xAxis: {
        //   name: '类别',
        //   data: ['国有控股', '集体控股', '私人控股', '港澳台控股', '外商控股'],
        //   axisLine: {
        //     lineStyle: {
        //       color: 'white'
        //     }
        //   },
        //   axisLabel: {
        //     color: '#fff',
        //     interval: 0
        //     // rotate: 45
        //   }
        // },
        // yAxis: {
        //   name: '件数',
        //   nameTextStyle: {
        //     color: 'white'
        //   },
        //   axisLine: {
        //     lineStyle: {
        //       color: '#0177d4'
        //     }
        //   },
        //   axisLabel: {
        //     color: '#fff'
        //   },
        //   splitLine: {
        //     show: false,
        //     lineStyle: {
        //       color: '#0177d4'
        //     }
        //   }
        // },
        // series: [{
        //   type: 'bar',
        //   barWidth: 30,
        //   data: [15, 27, 20, 23, 16]
        //   // itemStyle: {
        //   //   normal: {
        //   //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //   //       offset: 0,
        //   //       color: '#00b0ff'
        //   //     }, {
        //   //       offset: 0.8,
        //   //       color: '#7052f4'
        //   //     }], false)
        //   //   }
        //   // },
        // }]
      })
    },
    cyrs () {
      let cyrsEcharts = this.$echarts.init(document.getElementById('cyrs'))
      cyrsEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['男', '女'],
          // orient: 'vertical',
          x: 'center',
          y: 15,
          padding: 2,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // name: '数量',
          splitLine: {
            show: false
          },
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['小学以下', '小学', '中学', '大专', '本科', '硕士', '硕士以上'],
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '男',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [109, 16, 120, 14, 192, 85, 39],
            color: '#58a1fd'
          },
          {
            name: '女',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [78, 22, 68, 3, 34, 59, 41],
            color: '#963af3'
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .main{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .mainLeft{
    width: 68%;
    height: 900px;
  }
  .mainRight{
    width: 30%;
    height: 900px;
    position: relative;
    margin-left: 10px;
  }
  .mainLeftTop{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
  }
  .mainLeftTopL{
    width: 50%;
    height: 100%;
    position: relative;
    margin-right: 10px;
  }
  .mainLeftTopR{
    width: 50%;
    height: 100%;
    position: relative;
  }
  .ceng1{
    width: 100%;
    height: 400px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleMainLeftTopL{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainLeftTopL{
    color: white;
    position: absolute;
    top: 9px;
    left: 7%;
  }
  #zddq,#tcwt{
    width: 100%;
    height: 90%;
  }
  .ceng2{
    width: 100%;
    height: 400px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleMainLeftTopR{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainLeftTopR{
    color: white;
    position: absolute;
    top: 9px;
    left: 10%;
  }
  .mainLeftBottom{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .mainLeftBottomL{
    width: 20%;
    height: 100%;
    position: relative;
  }
  .mainLeftBottomC{
    width: 48%;
    height: 100%;
    position: relative;
    margin: 0 10px;
  }
  .mainLeftBottomR{
    width: 30%;
    height: 100%;
    position: relative;
  }
  .ceng3{
    width: 100%;
    height: 500px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleMainLeftBottomL{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainLeftBottomL{
    color: white;
    position: absolute;
    top: 10px;
    left: 3%;
  }
  .ceng4{
    width: 100%;
    height: 500px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .mainLeftBottomCT,.mainLeftBottomCB{
    position: relative;
    width: 100%;
    height: 50%;
  }
  .titleMainLeftBottomCT{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainLeftBottomCT{
    color: white;
    position: absolute;
    top: -10px;
    left: 8%;
  }
  #xyrxl{
    width: 100%;
    height: 80%;
  }
  .titleMainLeftBottomCB{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textMainLeftBottomCB{
    color: white;
    position: absolute;
    top: -10px;
    left: 8%;
  }
  #shrxl,#shrfx{
    width: 100%;
    height: 80%;
  }
  .ceng5{
    width: 100%;
    height: 500px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleMainLeftBottomR{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza5.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainLeftBottomR{
    color: white;
    position: absolute;
    top: 10px;
    left: 5%;
  }
  .mainRightT,.mainRightC,.mainRightB{
    width: 100%;
    height: 33.3%;
    position: relative;
  }
  .ceng6{
    width: 100%;
    height: 910px;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleMainRightT{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainRightT{
    color: white;
    position: absolute;
    top: -11px;
    left: 9%;
  }
  #wlqyfx{
    width: 100%;
    height: 100%;
  }
  .titleMainRightC{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza7.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .textMainRightC{
    color: white;
    position: absolute;
    top: -11px;
    left: 5%;
  }
  #kgfx{
    width: 100%;
    height: 90%;
  }
  .titleMainRightB{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_shza8.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textMainRightB{
    color: white;
    position: absolute;
    top: -11px;
    left: 5%;
  }
  #cyrs{
    width: 100%;
    height: 80%;
  }
  .xzpm{
    width: 20px;
    height: 75%;
    background-image: url('~@/assets/bigdata/img/y_shza9.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
  }
  .dataXzpm{
    float: left;
    color: white;
    font-size: 12px;
    width: 80%;
    margin-left: 4%;
  }
  .dataLi{
    float: right;
  }
  .dataXzpm ul li{
    margin-bottom: 7.8px;
  }
</style>
